<template>
	<uni-nav-bar :title="title" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package space-between" v-if="shopInfor">
		<image :src="shopInfor.goods_image" mode="" style="width: 210rpx;height: 210rpx;border-radius: 5px;"></image>
		<view class="direction-start" style="width:66%;height: 210rpx;">
			<view class="title">{{shopInfor.name}}</view>
			<view style="font-size: 28rpx;margin-top: 15rpx;">库存:{{shopInfor.nums}}件</view>
			<!-- <view style="font-size: 24rpx;">配送费：--</view>
			<view class="space-between" style="width:100%;">
				<view style="font-size: 26rpx;"><text
						style="color:#FF1313;font-size: 32rpx;margin-right: 10rpx;">--</text>蓝宝石
				</view>
				<view style="font-size: 24rpx;">零售价：--</view>
			</view> -->
			<view style="font-size: 26rpx;margin-top: 15rpx;color:#666;" v-if="shopInfor.subtitle">{{shopInfor.subtitle}}
      </view>
		</view>
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package" v-for="(item,index) in shopList" :key="item.id"
			:style="{marginTop:index==0?'0px':'15rpx'}">
			<view class="space-between">
				<view style="width:85%;">{{item.memo}}</view>
				<view>{{item.nums}}</view>
			</view>
			<view class="space-between top" style="font-size: 26rpx;">
				<view>{{item.createtime}}</view>
				<view>变动后：{{item.after}}</view>
			</view>
		</view>
		<Popu v-if="shopList.length<1" :pageHeight="pageHeight" text="暂无商品列表"></Popu>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { navBack } from '@/utils/navigator';
	import { showLoading } from '@/utils/prompt';
	import { onLoad } from '@dcloudio/uni-app';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { getKuGoodsChangeList, getKuGoodsInfo } from '@/gql/earthPushing/warehouse';
	import { toPublish } from '@mqtt';
	const title = ref()

	const wareID = ref() //仓库ID
	const shopID = ref() //商品ID
	const shopInfor = ref()

	const pageHeight = ref();
	const shopList = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 210;
		},
	});
	onLoad((pearm) => {
		wareID.value = Number(pearm.wareID)
		shopID.value = Number(pearm.shopID)
		init()
		shopDetail()
	})
	function shopDetail() {
		showLoading()
		const payload = {
			query: getKuGoodsInfo,
			variables: {
				id: Number(shopID.value)
			},
		};
		toPublish(
			'ql/control/getKuGoodsInfo',
			payload,
			(obj : any) => {
				const { getKuGoodsInfo } = obj.data;
				shopInfor.value = getKuGoodsInfo
				title.value = getKuGoodsInfo.name
			}
		);
	}
	/**
	 * 获取商品信息
	 * @param {Number} page  获取商品列表数据
	 * @param {String} keywords  搜索信息
	 */
	function init() {
		showLoading()
		const payload = {
			query: getKuGoodsChangeList,
			variables: {
				page: currentPage.value,
				id: Number(shopID.value)
			},
		};
		toPublish(
			'ql/control/getKuGoodsChangeList',
			payload,
			(obj : any) => {
				const { getKuGoodsChangeList } = obj.data;
				shopList.value = [...shopList.value, ...getKuGoodsChangeList.list];
				lastPage.value = getKuGoodsChangeList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 15rpx;
	}

	// .title {
	// 	width: 100%;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	white-space: nowrap;
	// }
</style>
<style>
	.top>>>.select-picker {
		justify-content: flex-end;
	}
</style>